<template>
  <div :style="{ color: color }">
    <span><slot/></span>
  </div>
</template>
<script>
export default {
  props: {
    value: Number
  },
  data() {
    return {
      color: '#2c3e50'
    }
  },
  watch: {
    value(newValue) {
      this.color = this.getColor(newValue)
    }
  },
  methods: {
    getColor(value) {
      if (value > 0) {
        return '#F56C6C'
      } else if (value < 0) {
        return '#67C23A'
      } else {
        return '#2c3e50'
      }
    }
  },
  mounted() {
    this.color = this.getColor(this.value)
  }
}
</script>
